import React, { Component } from 'react'
import './edit.css'
export default class Edit extends Component {
    constructor() {
        super()
        this.state = {
            dis: 'left'
        }
        this.text = React.createRef()
    }
    clickFontStatus(tag, style) {
        let selObj = window.getSelection();
        let text = this.text.current.innerHTML
        let selectText = selObj.toString()
        let reg = new RegExp(`<${tag} style="font-style:${style};">${selectText}</${tag}>`)
        let result = text.search(`<${tag} style="font-style:${style};">${selectText}</${tag}>`)
        if (result >= 0) {
            text = text.replace(reg, selectText)
            this.text.current.innerHTML = text
            return
        } else {
            reg = new RegExp(selectText)
        }
        text = text.replace(reg, `<${tag} style="font-style:${style};">${selectText}</${tag}>`)
        this.text.current.innerHTML = text
    }
    changeDir(dir) {
        this.setState({
            dir: dir
        })
    }
    getAskValue() {
        console.log(this.text.current.textContent)
        let value = this.text.current.textContent
        this.props.getAskValue(value)
    }
    componentDidMount() {
        this.getAskValue.bind(this)
    }
    render() {
        return (
            <div>
                <div className="btn-wrap">
                    <button onClick={this.clickFontStatus.bind(this, 'b', 'normal')} title="加粗">
                        <svg
                            t="1625559965436"
                            className="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="2463" width="30"
                            height="30"
                        >
                            <path
                                d="M259.015111 885.987556V138.012444h315.790222c34.816 0 76.003556 21.731556 107.690667 55.921778a216.860444 216.860444 0 0 1 57.457778 149.048889c0 58.026667-21.162667 109.568-56.888889 148.48 19.911111 9.386667 39.367111 22.926222 56.433778 39.424a206.620444 206.620444 0 0 1 64.512 150.129778A206.734222 206.734222 0 0 1 739.555556 831.089778c-34.474667 33.393778-78.791111 54.499556-115.768889 54.897778H259.015111z m71.964445-72.021334h291.726222c16.896 0 44.544-13.027556 66.787555-34.588444a134.997333 134.997333 0 0 0-0.056889-196.778667c-22.072889-21.333333-49.493333-34.360889-66.389333-34.588444H330.979556v265.955555z m0-337.976889h243.825777a54.215111 54.215111 0 0 0 22.186667-7.168c11.150222-5.916444 22.528-14.734222 32.654222-25.656889a145.009778 145.009778 0 0 0 38.343111-100.124444c0-39.765333-14.222222-74.183111-38.343111-100.181333a125.269333 125.269333 0 0 0-32.711111-25.656889 55.182222 55.182222 0 0 0-21.845333-7.224889H330.979556v266.012444z"
                                p-id="2464"
                                fill="#777777">
                            </path>
                        </svg>
                    </button>
                    <button onClick={this.clickFontStatus.bind(this, 'i', 'italic')} title="斜体">
                        <svg
                            t="1625560393516"
                            className="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="10533"
                            width="30"
                            height="30"
                        >
                            <path
                                d="M786.830222 120.547556c6.428444 2.844444 9.614222 6.542222 9.614222 11.036444 0 6.940444-4.380444 10.808889-13.198222 11.605333-33.166222 3.299556-56.547556 9.728-70.144 19.342223-13.596444 9.614222-24.746667 24.291556-33.564444 44.145777-8.817778 19.797333-26.908444 80.327111-54.272 181.475556a8238.08 8238.08 0 0 0-71.338667 281.713778c-20.195556 86.641778-30.264889 138.183111-30.264889 154.510222 0 36.807111 21.162667 57.002667 63.544889 60.700444 18.375111 1.649778 27.591111 6.314667 27.591111 14.108445 0 7.395556-7.623111 11.036444-22.755555 11.036444l-208.668445-3.697778-80.327111 1.877334c-12.401778 0-18.602667-3.697778-18.602667-11.036445 0-6.940444 9.614222-11.889778 28.785778-14.734222 35.555556-4.892444 60.529778-15.132444 74.922667-30.663111 14.392889-15.530667 26.737778-45.966222 37.205333-91.363556L485.831111 522.126222l53.930667-215.210666c14.392889-58.026667 21.617778-91.591111 21.617778-100.579556 0-41.642667-28.785778-64.568889-86.357334-68.664889-11.946667-1.194667-17.976889-5.518222-17.976889-12.856889 0-4.892444 1.820444-7.964444 5.404445-9.216 3.584-1.194667 13.596444-1.820444 29.980444-1.820444l294.343111 6.769778z"
                                p-id="10534"
                                fill="#777777"
                            >
                            </path>
                        </svg>
                    </button>
                    <button onClick={this.clickFontStatus.bind(this, 'u', 'normal')} title="下划线">
                        <svg
                            t="1625559288183"
                            className="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="2264"
                            width="30"
                            height="30"
                        >
                            <path
                                d="M731.989333 814.023111a36.010667 36.010667 0 1 1 0 71.964445H292.010667a36.010667 36.010667 0 0 1 0-71.964445h439.978666z m0-676.010667c19.683556 0 35.669333 15.758222 36.010667 35.384889v278.186667c0 176.753778-92.558222 284.444444-256 284.444444-161.792 0-254.122667-105.585778-256-279.153777V174.08a36.010667 36.010667 0 0 1 72.021333-0.568889v278.186667c0 69.404444 16.270222 123.050667 46.705778 158.492444 30.264889 35.271111 75.776 53.873778 137.272889 53.873778 61.496889 0 106.951111-18.659556 137.272889-53.873778 30.151111-35.100444 46.421333-88.007111 46.705778-156.444444V174.08c0-19.911111 16.156444-36.010667 36.010666-36.010667z"
                                p-id="2265"
                                fill="#777777"
                            >
                            </path>
                        </svg>
                    </button>
                    <button onClick={this.clickFontStatus.bind(this, 'del', 'normal')} title="删除线">
                        <svg
                            t="1625560547235"
                            className="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="17452"
                            width="30"
                            height="30"
                        >
                            <path
                                d="M203.824 562.992h-63.472c-15.048 0-21.792-21.176-21.792-36.224s10.024-30.792 25.08-30.792h60.184V119.8h230.728c213.168 0 388.72 165.52 401.248 376.176h60.192c15.04 0 24.84 19.824 24.84 34.864 0 15.048-9.008 32.16-24.048 32.16h-63.216c-12.528 210.656-185.848 359.32-399.024 359.32h-230.72V562.992z m81.84-0.344v281.464h160.728c165.184 0 301.336-123.408 312.52-281.464H285.664z m1.944-66.672H757.6c-11.104-176.472-127.736-314.272-310.368-314.272H287.608v314.272z"
                                p-id="17453"
                                fill="#777777"
                            >
                            </path>
                        </svg>
                    </button>
                    <i>
                        <svg
                            t="1625566329140"
                            className="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="23324"
                            width="35"
                            height="35"
                        >
                            <path
                                d="M505.856 46.592h43.52v930.816h-43.52V46.592z"
                                fill="#d2d2d2"
                                p-id="23325"
                            >
                            </path>
                        </svg>
                    </i>
                    <button onClick={this.changeDir.bind(this, 'left')} title="左对齐">
                        <svg
                            t="1625560051988"
                            className="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="2754"
                            width="30"
                            height="30"
                        >
                            <path
                                d="M539.989333 823.978667a36.010667 36.010667 0 1 1 0 72.021333h-391.964444a36.010667 36.010667 0 1 1 0-72.021333h391.964444z m335.985778-231.992889a36.010667 36.010667 0 1 1 0 72.021333H148.024889a36.010667 36.010667 0 1 1 0-72.021333h727.950222zM539.989333 359.992889a36.010667 36.010667 0 0 1 0 72.021333h-391.964444a36.010667 36.010667 0 0 1 0-72.021333h391.964444z m335.985778-231.992889a36.010667 36.010667 0 1 1 0 72.021333H148.024889a36.010667 36.010667 0 0 1 0-72.021333h727.950222z"
                                p-id="2755"
                                fill="#777777"
                            >
                            </path>
                        </svg>
                    </button>
                    <button onClick={this.changeDir.bind(this, 'center')} title="居中对齐">
                        <svg
                            t="1625560107230"
                            className="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="3069"
                            width="30"
                            height="30"
                        >
                            <path
                                d="M875.975111 823.978667a36.010667 36.010667 0 1 1 0 72.021333H148.024889a36.010667 36.010667 0 1 1 0-72.021333h727.950222z m0-231.992889a36.010667 36.010667 0 1 1 0 72.021333H148.024889a36.010667 36.010667 0 1 1 0-72.021333h727.950222z m0-231.992889a36.010667 36.010667 0 1 1 0 72.021333H148.024889a36.010667 36.010667 0 0 1 0-72.021333h727.950222z m0-231.992889a36.010667 36.010667 0 1 1 0 72.021333H148.024889a36.010667 36.010667 0 0 1 0-72.021333h727.950222z"
                                p-id="3070"
                                fill="#777777"
                            >
                            </path>
                        </svg>
                    </button>
                    <button onClick={this.changeDir.bind(this, 'right')} title="右对齐">
                        <svg
                            t="1625560138804"
                            className="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="3483"
                            width="30"
                            height="30"
                        >
                            <path
                                d="M875.975111 823.978667a36.010667 36.010667 0 1 1 0 72.021333h-391.964444a36.010667 36.010667 0 1 1 0-72.021333h391.964444z m0-231.992889a36.010667 36.010667 0 1 1 0 72.021333H148.024889a36.010667 36.010667 0 1 1 0-72.021333h727.950222z m0-231.992889a36.010667 36.010667 0 1 1 0 72.021333h-391.964444a36.010667 36.010667 0 0 1 0-72.021333h391.964444z m0-231.992889a36.010667 36.010667 0 1 1 0 72.021333H148.024889a36.010667 36.010667 0 0 1 0-72.021333h727.950222z"
                                p-id="3484"
                                fill="#777777"
                            >
                            </path>
                        </svg>
                    </button>
                </div>
                <div className="put-wrap">
                    <p
                        onKeyDown={this.getAskValue.bind(this)}
                        contentEditable="true"
                        ref={this.text}
                        style={{ width: "480px", height: "200px", outline: "medium", textAlign: this.state.dir, overflow: 'auto', lineHeight: "25px" }}
                    >
                    </p>
                </div>
            </div>
        )
    }
}
